<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				margin: 40px auto;
				border-right:1px solid #ccc;
				border-bottom:1px solid #ccc;
				font-size: 14px;
				
			}
			tr td:first-child,tr td:nth-child(3){
				text-align: right;
				
			}
			tr td:first-child{
				width: 150px;
			}
			tr td:nth-child(3){
				width: 140px;
			}
			tr td:nth-child(2),tr td:nth-child(4){
				width: 180px;
			}
			td{
				border-top:1px solid #ccc;
				border-left:1px solid #ccc;
				padding: 4px 4px;
				
			}
			input{
				width: 160px;
				height: 16px;
			}
			#tiJiao{
				width: 100px;
				margin-right: 10px;
				height: 26px;
			}
			select{
				width: 160px;
				height: 26px;
			}
			.shisuan{
				height: 60px;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0">
			<tr>
				<td colspan="4" bgcolor="#ccc" style="color:darkred;text-align: center;font-size: 16px;" >个 人 存 款 计 算 器</td>
			</tr>
			<tr>
				<td height="18px" colspan="4"></td>
			</tr>
			<tr>
				<td>存款类型</td>
				<td colspan="3">
					<select>
						<option>==请选择==</option>
						<option>活期</option>
						<option selected>整存整取</option>
						<option>零存整取</option>
						<option>存本取息</option>
						<option>整存零取</option>
						<option>定活两便</option>
						<option>通知存款</option>
						<option>教育储蓄</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>币种</td>
				<td>
					<select>
						<option selected>人民币</option>
						<option>美元</option>
						<option>港币</option>
						<option>欧元</option>
						<option>英镑</option>
						<option>澳大利亚元</option>
						<option>日元</option>
						<option>加拿大元</option>
						<option>瑞士法郎</option>
						<option>新加坡元</option>
					</select>
				</td>
				<td>初始存款金额</td>
				<td>
					<input  id="money" />
				</td>
			</tr>
			<tr>
				<td>存款期限</td>
				<td>
					<select id="year">
						<option>三个月</option>
						<option>六个月</option>
						<option>一年</option>
						<option>两年</option>
						<option>三年</option>
						<option selected>五年</option>
					</select>
				</td>
				<td>年利率</td>
				<td>
					<input value="2.75" id="rate" />%
				</td>
			</tr>
			<tr>
				<td>初始存入日期</td>
				<td>&nbsp;</td>
				<td>月存入金额</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>支取频次</td>
				<td>&nbsp;</td>
				<td>提取日期</td>
				<td>&nbsp;</td>
			</tr>
			<tr class="shisuan">
				<td colspan="4" align="right" >
					<input type="button" value="提交试算" id="tiJiao" onclick="jisuan()"/>
				</td>
			</tr>
			<tr>
				<td>所得利息金额</td>
				<td colspan="3">
					<input id="getRate" />
				</td>
			</tr>
			<tr>
				<td>利息税金额</td>
				<td colspan="3">
					<input value="0"/>
				</td>
			</tr>
			<tr>
				<td>本息合计（税后）</td>
				<td colspan="3">
					<input id="getMoney"/>
				</td>
			</tr>
			<tr>
				<td colspan="4" style="text-align: left;">
					<p>温馨提示：<br/>
					1. 理财计算器的数据、计算结果仅供参考。具体以办理业务或交易实际结果为准，据此投资风险自负。<br/>
					2. 理财计算器在计息过程中，一年以360天为标准。</p>
				</td>
			</tr>
		</table>
		
		<script>
			var jisuan=function(){
				if(isNaN(money.value)==true||parseFloat(money.value)<0){
					alert("请您输入正确的存款金额");
				}else{
					getRate.value=parseFloat(money.value)*rate.value*0.01*5;
					getMoney.value=parseFloat(money.value)+parseFloat(getRate.value)
				}
			}
		</script>
	</body>
</html>
